import React, { memo } from "react"
import type { ReactNode } from "react"
import { Link } from "react-router-dom"
import "./index.less"
interface Iprops {
	children?: ReactNode
	title?: string
	keyWords?: { name: string; link: string }[]
	moreTxt?: string
	moreLink?: string
}

const SectionHeaderV1: React.FC<Iprops> = (props) => {
	const { title = "热门推荐", moreTxt = "更多", keyWords = [], moreLink = "/" } = props
	return (
		<div className="sectionHeaderV1Container sprite_02">
			<div className="left">
				<span className="title">{title}</span>
				<div className="keywords">
					{keyWords.map((item) => {
						return (
							<div className="item" key={item.link}>
								<Link className="link" to={item.link}>
									{item.name}
								</Link>
								<span className="divider">|</span>
							</div>
						)
					})}
				</div>
			</div>
			<div className="right">
				<Link to={moreLink}>{moreTxt}</Link>
				<i className="sprite_02 icon"></i>
			</div>
		</div>
	)
}

export default memo(SectionHeaderV1)
